<template>
  <div class="content_box">
    <div class="list" v-for="(item,index) in list" :key="index">
      <p class="name">{{item.configName}}</p>
      <p class="icon" @click="clickOnOff(item)">{{!item.onOff?'点击开启':'点击关闭'}}</p>
    </div>
  </div>
</template>
 
<script>
import {
  getStoreConfig,
  updateStoreConfig
} from "@/api/index";
export default {
  components: {
  },
  data() {
    return{
      keyName:'',
      list:[]
    }
  },
  onShow() {
 
  },
  methods: {
    clickOnOff(item){
      console.log(item.onOff)
      wx.showModal({
        title: "温馨提示",
        content: !item.onOff?'确认开启':'确认关闭',
        confirmText:'确认',
        success: (res)=>{
          if (res.confirm) {
            item.onOff = !item.onOff

            this.$showLoading(item.onOff?'开启中...':'关闭中...')
            updateStoreConfig({keyName:item.keyName,onOff:item.onOff}).then(res=>{
              if(res.statusCode == '00000'){
                wx.hideLoading()
                this.$toast(item.onOff?'已开启':'已关闭')
              }else{
                wx.hideLoading()
                this.$toast(res.message)
              }
            })
          }
        },
      });
    }
  },
  onHide() {},
  onLoad() {
    getStoreConfig().then(res=>{
      if(res.statusCode == '00000'){
        this.list = res.data
      }
    })
  },
  onUnload() {
  },
  created() {}
};
</script>

<style lang="scss"  scoped>
.content_box {
  padding:0 30rpx;
  .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom:1px solid #f5f5f5;
    padding:30rpx 0;
    .name{
          font-size:32rpx;
          color:#323233;
        }
        .icon{
          width: 196rpx;
          height: 60rpx;
          display:flex;
          align-items: center;
          justify-content: center;
          border:1px solid #222;
          color:#222;
          font-size:28rpx;
          font-weight: 500;
          border-radius: 50rpx;
          &.on{
            opacity: 0.5;
          }
        }
  }
}
</style>
